{% extends "base.html" %}
{% block title %}Sign in — LegalEase AI{% endblock %}

{% block navbar %}
<nav class="navbar">
    <a class="navbar-brand" href="/"><i class="fas fa-balance-scale"></i> LegalEase AI</a>
    <div class="navbar-nav">
        <span class="nav-user" style="border:none;">New here?</span>
        <a href="/api/auth/register" class="btn btn-accent btn-sm">Create account</a>
    </div>
</nav>
{% endblock %}

{% block extra_styles %}
<style>
.auth-container { min-height: calc(100vh - 68px); display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--wash); }
.auth-card { background: var(--paper); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 40px -10px rgba(15,21,34,0.12); padding: 2.6rem; width: 100%; max-width: 420px; }
.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-logo i { font-size: 2rem; color: var(--accent); }
.auth-logo h2 { color: var(--ink); margin-top: 0.7rem; font-size: 1.6rem; letter-spacing: -0.02em; }
.auth-logo p { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
.divider { text-align: center; color: var(--muted); font-size: 0.82rem; margin: 1.3rem 0 1rem; position: relative; }
.divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--border); }
.divider span { background: var(--paper); padding: 0 0.75rem; position: relative; }
.auth-alt { text-align:center; font-size:0.9rem; color:var(--muted); }
.auth-alt a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }
</style>
{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-card reveal">
        <div class="auth-logo">
            <i class="fas fa-balance-scale"></i>
            <h2>Welcome back</h2>
            <p>Sign in to continue your case</p>
        </div>

        {% if error %}
        <div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> {{ error }}</div>
        {% endif %}

        {% if request.query_params.get('registered') %}
        <div class="alert alert-success"><i class="fas fa-check-circle"></i> Account created — sign in to get started.</div>
        {% endif %}

        <form method="POST" action="/api/auth/login">
            <div class="form-group">
                <label class="form-label">Email address</label>
                <input type="email" name="email" class="form-control" placeholder="you@example.com" required autofocus>
            </div>
            <div class="form-group">
                <label class="form-label">Password</label>
                <input type="password" name="password" class="form-control" placeholder="Your password" required>
            </div>
            <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;padding:0.78rem;font-size:0.98rem;margin-top:0.4rem;">
                Sign in
            </button>
        </form>

        <div class="divider"><span>or</span></div>
        <p class="auth-alt">
            Don't have an account? <a href="/api/auth/register">Create one free</a>
        </p>
    </div>
</div>
{% endblock %}